const path = require('path')
const webpack = require('webpack')
const createThemeColorReplacerPlugin = require('./config/plugin.config')
const {
	BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer')
function resolve(dir) {
	return path.join(__dirname, dir)
}
console.log('VUE_APP_ISPRO',typeof process.env.VUE_APP_ISPRO,process.env.VUE_APP_ISPRO)
/**
 * check production or preview(pro.loacg.com only)
 * @returns {boolean}
 */
function isProd() {
	return process.env.NODE_ENV === 'production'
}

const assetsCDN = {
	css: [],
	// https://unpkg.com/browse/vue@2.6.10/
	js: [
		'//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
		'//cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
		'//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
		'//cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js'
	]
}

// webpack build externals
const prodExternals = {
	vue: 'Vue',
	'vue-router': 'VueRouter',
	vuex: 'Vuex',
	axios: 'axios'
}

// vue.config.js
const vueConfig = {
	
	configureWebpack: {
		// webpack plugins
		plugins: [
			// Ignore all locale files of moment.js
			new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
		],

		// if prod is on, add externals
		// externals: isProd() ? prodExternals : {},
		optimization: {
			splitChunks: {
				cacheGroups: {
					common: {
						name: 'chunk-common', // 打包后的文件名
						chunks: 'initial', // 
						minChunks: 2,
						maxInitialRequests: 5,
						minSize: 0,
						priority: 1,
						reuseExistingChunk: true
					},
					vendors: {
						name: 'chunk-vendors',
						test: /[\\/]node_modules[\\/]/,
						chunks: 'initial',
						priority: 2,
						reuseExistingChunk: true,
						enforce: true
					},
					antDesignVue: {
						name: 'chunk-ant-design-vue',
						test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
						chunks: 'initial',
						priority: 3,
						reuseExistingChunk: true,
						enforce: true
					},
					echarts: {
						name: "chunk-echarts",
						test: /[\\/]node_modules[\\/]echarts[\\/]lib[\\/]/,
						chunks: "all",
						priority: 4,
						reuseExistingChunk: true,
						enforce: true
					}, // 由于echarts使用了zrender库，那么需要将其抽离出来，这样就不会放在公共的chunk中
					zrender: {
						name: "chunk-zrender",
						test: /[\\/]node_modules[\\/]zrender[\\/]lib[\\/]/,
						chunks: "all",
						priority: 5,
						reuseExistingChunk: true,
						enforce: true
					},
					tinymce: {
						name: "chunk-tinymce",
						test: /[\\/]node_modules[\\/]tinymce[\\/]/,
						chunks: "all",
						priority: 6,
						reuseExistingChunk: true,
						enforce: true
					}
				}
			}
		}

	},

	chainWebpack: (config) => {
		config.resolve.alias
			.set('@$', resolve('src'))
		// .set('@ant-design/icons/lib/dist$', resolve('src/core/antd/icons.js'))

		const svgRule = config.module.rule('svg')
		svgRule.uses.clear()
		svgRule
			.oneOf('inline')
			.resourceQuery(/inline/)
			.use('vue-svg-icon-loader')
			.loader('vue-svg-icon-loader')
			.end()
			.end()
			.oneOf('external')
			.use('file-loader')
			.loader('file-loader')
			.options({
				name: 'assets/[name].[hash:8].[ext]'
			})

		// if prod is on
		// assets require on cdn
		// if (isProd()) {
		// 	config.plugin('html').tap(args => {
		// 		args[0].cdn = assetsCDN
		// 		return args
		// 	})
		// }
		if (process.env.NODE_ENV === 'production') {
			config.plugin('extract-css').tap(() => [{
				path: path.join(__dirname, './dist'),
				filename: 'css/[name].[contenthash:8].css'
			}])
		}
		// config.plugin('webpack-report').use(BundleAnalyzerPlugin, [{
		// 	analyzerMode: 'static',
		// }, ])
	},

	css: {
		loaderOptions: {
			less: {
				modifyVars: {
					'primary-color': '#00BEC5',
					'border-radius-base': '4px',
					'nav-header-height': '60px',
					/* 'component-background':'#00BEC5', */
					'layout-header-height': '60px',
					'table-header-bg-sm': '#EFF6FB',
					'table-header-bg': '#EFF6FB',
					'table-border-color': '#EBF3F9',
					'table-border-radius-base': '0',
					// 'table-row-hover-bg':'rgba(10, 135, 131, 0.1)',
					// 'menu-item-height': '72px',
					'item-active-bg': 'rgba(10, 135, 131, 0.1)',
					'warning-color': '#D60000', // 错误色
					// @table-header-sort-bg: @background-color-base;
					// @table-body-sort-bg: rgba(0, 0, 0, 0.01);
				},
				// do not remove this line
				javascriptEnabled: true
			}
		}
	},

	devServer: {
		// development server port 8000
		port: 9081,
		// If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
		// proxy: {
		// 	'/api': {
		// 		target: 'http://192.168.10.168:8080',
		// 		ws: false,
		// 		changeOrigin: true,
		// 		pathRewrite: {
		// 			'^/api': ''
		// 		}
		// 	}
		// }
	},

	// disable source map in production
	productionSourceMap: false,
	lintOnSave: false,
	// babel-loader no-ignore node_modules/*
	transpileDependencies: [
		'vue-echarts',
		'resize-detector',
		'vue-grid-layout'
	],
	publicPath: '/',

}

// preview.pro.loacg.com only do not use in your production;
if (process.env.VUE_APP_PREVIEW === 'true') {
	console.log('VUE_APP_PREVIEW', true)
	// add `ThemeColorReplacer` plugin to webpack plugins
	vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
}
if (process.env.NODE_ENV === 'production') {
	vueConfig.configureWebpack.output = {
		path: path.join(__dirname, './dist'),
		filename: 'js/[name].[contenthash:8].js',
		chunkFilename: 'js/[name].[contenthash:8].js'
	}
}

module.exports = vueConfig